<template>
		<!-- 网格列表 -->
		<uni-grid :column="column" :highlight="true" :showBorder="false">
			<uni-grid-item v-for="(item,index) in list" :index="index" :key="index"
			style="margin-bottom: 20rpx;">
			<!-- 音乐 -->
			<view class="grid-item-box">
				<image :src="item.src" mode="aspectFill"></image>
				<text class="text">{{ item.name }}</text>
			</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	export default {
		name:"MusicListComponent",
		data() {
			return {
				
			};
		},
		//1子组件参数定义
		props: {
			column: {
				type:Number,
				required:true
			},
			list: {
				type:Array,
				required:true,
				validator:function(value) {//非必须，若是有自信确保数据正确
				//1检查value是否确实为数组，如果不是则返回false
				if(!Array.isArray(value)){
					return false
				};
				//2.遍历数组中的每个元素，检查它们是否都包含歌曲图片
				for(let i = 0; i < value.length;i++){
					//3.确实歌曲图片src 或歌曲名称name属性，则返回false
					if(!value[i].src || !value[i].name) return false;
				}
					//4.验证通过
					return true;
				}
			},
		}
	}
</script>

<style lang="scss">
	//音乐
	.grid-item-box{
		width: 98%;
		height:auto;
		//图片
		image{
			width: 100%;
			height: 200rpx;
		}
	}

</style>